<script setup>
import {
  getAllTagInfoAPI,
  editTagAPI,
  addTagAPI,
  deleteTagAPI
} from '@/api/user'
import { onMounted, ref } from 'vue'

const allTagInfo = ref([])
const getAllTagInfo = async () => {
  const res = await getAllTagInfoAPI()
  allTagInfo.value = res.data
  if (allTagInfo.value.length > pageSize.value) {
    nowPageInfo.value = allTagInfo.value.slice(index.value, end.value)
  } else {
    nowPageInfo.value = allTagInfo.value
  }
}

const edit = ref(false)
const editTagInfo = ref()
const editTag = (row) => {
  edit.value = true
  editTagInfo.value = row
}
const sendTagEdit = async () => {
  const res = await editTagAPI(editTagInfo.value)
  if (res.data === 1) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error('修改失败')
  }
}

const add = ref(false)
const addTagInfo = ref({
  Id: '',
  TagName: '',
  Count: ''
})
const addTag = () => {
  add.value = true
  addTagInfo.value = {
    Id: '',
    TagName: '',
    Count: ''
  }
}
const sendTagAdd = async () => {
  const res = await addTagAPI(addTagInfo.value)
  if (res.data === 1) {
    ElMessage.success('添加成功')
    getAllTagInfo()
    add.value = false
  } else {
    ElMessage.error('添加失败')
  }
}
const deleateTag = async (tag) => {
  const res = await deleteTagAPI(tag)
  if (res.data === 1) {
    ElMessage.success('删除成功')
    getAllTagInfo()
  } else {
    ElMessage.error('删除失败')
  }
}

onMounted(() => {
  getAllTagInfo()
})
const currentPage = ref(1)
const pageSize = ref(10)
const index = ref((currentPage.value - 1) * pageSize.value)
const end = ref(index.value + pageSize.value)
const nowPageInfo = ref([])
const handleSizeChange = (val) => {
  pageSize.value = val
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  index.value = (currentPage.value - 1) * pageSize.value
  end.value = index.value + pageSize.value
  console.log(index.value, end.value)
  nowPageInfo.value = allTagInfo.value.slice(index.value, end.value)
}
</script>

<template>
  <el-button type="primary" @click="addTag" style="margin-bottom: 10px"
    >添加标签</el-button
  >
  <el-table :data="nowPageInfo" border style="width: 100%">
    <el-table-column prop="Id" label="id" visable="false" width="50" />
    <el-table-column prop="TagName" label="标签名" width="360" />
    <el-table-column prop="Count" label="热度" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="editTag(scope.row)">编 辑</el-button>
        <el-button type="error" @click="deleateTag(scope.row)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    layout="sizes, prev, pager, next"
    :total="allTagInfo.length"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background
    style="margin: 10px auto"
  />
  <el-dialog v-model="edit" title="编辑标签" width="500">
    <el-form :model="editTagInfo">
      <el-form-item label="标签id">
        <el-input v-model="editTagInfo.Id" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="标签名">
        <el-input v-model="editTagInfo.TagName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标签热度">
        <el-input v-model="editTagInfo.Count" autocomplete="off" disabled />
      </el-form-item>
      <el-button type="primary" @click="sendTagEdit">保 存</el-button>
    </el-form>
  </el-dialog>
  <el-dialog v-model="add" title="添加标签" width="500">
    <el-form :model="addTagInfo">
      <el-form-item label="标签id">
        <el-input v-model="addTagInfo.Id" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="标签名">
        <el-input v-model="addTagInfo.TagName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标签热度">
        <el-input v-model="addTagInfo.Count" autocomplete="off" disabled />
      </el-form-item>
      <el-button type="primary" @click="sendTagAdd">添 加</el-button>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>
